<template>
	<view class="LearnClock">
		<!-- 导航 -->
		<view class="LearnClock-navlist bg-white margin padding flex align-center">
			<view @click="navFn('/pages/Html/index')">
				<image src="../../static/learn/zhexian.png" mode="heightFix"></image>
				<text class="text-sm margin-top-xs">启蒙方法</text>
			</view>
			<view @click="navFn('/personPages/Audio/index')">
				<image src="../../static/learn/voice.png" mode="heightFix"></image>
				<text class="text-sm margin-top-xs">我的配音</text>
			</view>
			<view @click="navFn('/pages/EarGrinding/index')">
				<image src="../../static/learn/mogu.png" mode="heightFix"></image>
				<text class="text-sm margin-top-xs">磨耳朵</text>
			</view>
		</view>
		<!-- 阅读统计 -->
		<view class="LearnClock-total margin padding bg-white">
			<view class="text-bold text-center text-black ">总阅读</view>
			<view class="flex align-center justify-center">
				<view class="margin text-sm">阅读天数：<text class="text-orange">{{historyValue.readDays}}天</text></view>
				<view class="margin text-sm">阅读数量：<text class="text-orange">{{historyValue.readBooks}}本</text></view>
			</view>
			<view class="LearnClock-flex flex align-center justify-between">
				<view class="text-center">
					<view><text class="text-bold text-black ">{{historyValue.todayRead}}</text><text class="text-sm">本</text></view>
					<view class="text-sm margin-top-sm">今日阅读</view>
				</view>
				<view class="text-center">
					<view><text class="text-bold text-black ">{{historyValue.weekRead}}</text><text class="text-sm">本</text></view>
					<view class="text-sm margin-top-sm">本周阅读</view>
				</view>
				<view class="text-center">
					<view><text class="text-bold text-black ">{{historyValue.monthRead}}</text><text class="text-sm">本</text></view>
					<view class="text-sm margin-top-sm">本月阅读</view>
				</view>
			</view>
			<view  class="LearnClock-btn">
				<view @click="navFn('/pages/LearnCopy/index')">今天读了{{historyValue.todayRead || 0}}本，打个卡</view>
			</view>
		</view>
	    <!-- 今日阅读 -->
		<view class="LearnClock-today text-center margin text-orange bg-white padding">今日阅读</view>
	    <!-- 页面内容 -->
	    <CardGrid @handle="readbookNav" type='learnClock' :list="historyValue.list" ></CardGrid>
		<!-- 弹窗 -->
		<Modal title="打卡留言" @confirm="confirm" @cancel="showModal=false" :show="showModal">
			<view class="text-left padding-xl">
			  <textarea v-model="value" maxlength="200"  placeholder="请写下你的打卡留言……"></textarea>
			</view>
		</Modal>
	</view>
</template>

<script>
	import CardGrid from '@/plugin/card_grid.vue';
	import Modal from '@/plugin/modal.vue';
	
	import * as userInfoApi from '@/api/UserInfo/index.js';
	import * as readHistoryApi from '@/api/ReadHistory/index.js';
	import * as api from '@/api/LearnLock/index.js';
	
	export default {
		components:{
			CardGrid,Modal
		},
		data(){
			return {
				historyValue:{
					list:[{},{},{},{},{},{},{}]
				},
				enlightenmentMethodsPage:null,
				showModal:false,
				value:''
			}
		},
		onLoad() {
		  this.getHistory();
		  this.getSetting();
		},
		methods:{
			// 跳转读书页面
			readbookNav(value){
				uni.navigateTo({
					url:'/pages/ReadBook/index?id='+value.id
				})
			},
			async confirm(){
			  try{
				  let res=await api.clockIn(this.value);
				  if(res.code===0 || res.code===5002){
				  	this.value='';
				  	uni.navigateTo({
				  		url:'/pages/LearnCopy/index'
				  	});
				  }
			  }finally{
				this.showModal=false;
			  }
			},
			// 获取阅读记录
			async getHistory(){
					let res=await readHistoryApi.readSummary();
					if(res.code!==0) return false;
					let {list,...params}=res.data;
					res=await api.todayReadList();
					if(res.code!==0) return false;
					list=res.data;
					this.historyValue={...params,list};
			},
			// 获取启蒙方法
			async getSetting(){
				let res=await userInfoApi.setting();
				if(res.code==0){
				  this.enlightenmentMethodsPage=res.data.enlightenmentMethodsPage;
				}
			},
			// 导航
			navFn(value){
				if(value=='/pages/Html/index'){
				  uni.navigateTo({
				  	url:'/pages/Html/index?to='+this.enlightenmentMethodsPage
				  })
                  return false;					
				}
				if(value=='/pages/LearnCopy/index'){
					this.showModal=true;
					return false;
				}
				uni.navigateTo({
					url:value
				})
			}
		}
	}
</script>

<style lang="scss">
	.LearnClock {
		.LearnClock-navlist {
			border-radius: 16upx;

			>view {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					width: 50upx;
					height: 50upx;
				}
			}
		}

		.LearnClock-total {
			border-radius: 16upx;

			.LearnClock-flex {
				>view {
					flex: 1;

					>view:first-child {
						line-height: 40upx;

						>text {
							display: inline-block;
							vertical-align: bottom;
						}
					}
				}
			}

			.LearnClock-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30upx;
				>view{
					border: 2upx solid #f07a1d;
					color: #f07a1d;
					line-height: 60upx;
					padding: 0 40upx;
					border-radius: 10upx;
					font-size: 22upx;
					background-color: rgba(240, 122, 29,0.2);
				}
			}
		}
		.LearnClock-today{
			border-radius: 16upx;
		}
	}
</style>